<template>
  <view class="pics">
    <!-- 左边 -->
    <scroll-view class="left" scroll-y="true">
      <view 
      @click="leftClickHandle(index)"
      :class="active===index?'active':''" 
      v-for="(item3,index) in list" :key="item3.id"
      >
        {{item3.title}}
      </view>
    </scroll-view>
    <!-- 右边 -->
    <scroll-view scroll-y="true" class="right">
      <view class="item" v-for="(item4,index) in arrlist" :key="index">
        <image :src="item4.image"></image>
        <text>{{item4.name}}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {"title":"家居生活","id":14},
          {"title":"摄影设计","id":15},
          {"title":"明星美女","id":16},
          {"title":"空间设计","id":17},
          {"title":"户型装饰","id":18},
          {"title":"广告摄影","id":19},
          {"title":"摄影学习","id":20},
          {"title":"摄影器材","id":21},
          {"title":"明星写真","id":22},
          {"title":"清纯甜美","id":23},
          {"title":"古典美女","id":24}
        ],
        arrlist: [
          {
            image: "../../static/1a.jpg",
            name: "实木轻奢岩板桌子餐桌椅组合伸缩折叠家用方圆两用小户型吃饭圆桌"
          }
        ],
        active: 0
      }
    },
    methods: {
      leftClickHandle(index) {
        this.active = index
      }
    },
    onPullDownRefresh() {
    		setTimeout(function () {
    			uni.stopPullDownRefresh();
    		}, 1000);
    }
  }
</script>

<style lang="scss">
page{
    height: 100%;
  }
  .pics{
    height: 100%;
    display: flex;
    .left{
      width: 200rpx;
      height: 100%;
      border-right: 1px solid #eee;
      view{
        height: 60px;
        line-height: 60px;
        color: #333333;
        text-align: center;
        font-size: 30rpx;
        border-top: 1px solid #eee;
      }
      .active{
        background: #00ff7f;
        color: #fff;
      }
    }
    .right{
      height: 100%;
      width: 530rpx;
      margin: 10rpx auto;
      .item{
        image{
          width: 520rpx;
          height: 520rpx;
          border-radius: 5px;
        }
        text{
          font-size: 26rpx;
          line-height: 60rpx;
        }
      }
    }
  }
</style>
